<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="/WEB-INF/tld/fns.tld" prefix="fns" %>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <jsp:include page="/resources/inc/pageHead.jsp" />
    <link href="${basePath}/resources/zheng-admin/plugins/zTree_v3/css/demo.css" rel="stylesheet"/>
    <link href="${basePath}/resources/zheng-admin/plugins/zTree_v3/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <style>
        .menuContent {
            left: 0 !important;
            top: 40px !important;
        }
    </style>
</head>
<body>
<form class="layui-form layui-form-pane" id="_form">
    <input type="hidden" name="id" value="${recruitPlan.id}">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">招聘计划</li>
            <li>招聘需求</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">招聘计划名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" lay-verify="required" autocomplete="off"
                                   placeholder="请输入招聘计划名称" class="layui-input" value="${recruitPlan.name}">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">招聘人数</label>
                        <div class="layui-input-inline">
                            <input name="number" type="text" lay-verify="number" autocomplete="off"
                                   placeholder="请输入招聘人数" class="layui-input" value="${recruitPlan.number}">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">预算费用(元)</label>
                        <div class="layui-input-inline">
                            <input type="text" name="money" lay-verify="money" autocomplete="off"
                                   placeholder="请输入预算费用" class="layui-input" value="${recruitPlan.money}">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">开始时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="startTime" lay-verify="date" readonly="readonly"
                                   placeholder="请选择开始时间" class="layui-input date-select"
                                   value="<fmt:formatDate value='${recruitPlan.startTime}' pattern='yyyy-MM-dd'/>">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">结束时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="endTime" lay-verify="date" readonly="readonly"
                                   placeholder="请选择结束时间" class="layui-input date-select"
                                   value="<fmt:formatDate value='${recruitPlan.endTime}' pattern='yyyy-MM-dd'/>">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <textarea name="description" autocomplete="off" placeholder="请输入描述"
                                  class="layui-textarea">${recruitPlan.description}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="remarks" autocomplete="off" placeholder="请输入备注"
                                  class="layui-textarea">${recruitPlan.remarks}</textarea>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div id="recruit_require">

                </div>
                <button class="layui-btn" type="button" onclick="addRecruitRequire()">添加招聘需求</button>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="float: right">
            <button class="layui-btn" type="button" lay-submit="" lay-filter="sub">立即提交</button>
        </div>
    </div>
</form>
<jsp:include page="/resources/inc/pageFooter.jsp" />
<script src="${basePath}/resources/zheng-admin/js/my-ztree-common.js"></script>
<script type="text/html" id="require">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline ztreeDiv">
                <input type="text" lay-verify="required" autocomplete="off" readonly="readonly" placeholder="请选择部门"
                       class="layui-input" value="{{=d.organizationName}}" ztreeId="{{=d.organizationZtreeId}}"
                       onclick="ZtreeCommon.showMenu(this)">
                <input type="hidden" requireName="organizationId" ztreeId="{{=d.organizationZtreeId}}"
                       value="{{=d.organizationId}}">
                <div class="menuContent" style="display:none; position: absolute;z-index: 10000;">
                    <ul id="{{=d.organizationZtreeId}}" class="ztree" style="margin-top:0; width:220px;"></ul>
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">岗位</label>
            <div class="layui-input-inline ztreeDiv">
                <input type="text" lay-verify="required" autocomplete="off" readonly="readonly" placeholder="请选择岗位"
                       class="layui-input" value="{{=d.positionName}}" ztreeId="{{=d.positionZtreeId}}"
                       onclick="ZtreeCommon.showMenu(this)">
                <input type="hidden" requireName="positionId" ztreeId="{{=d.positionZtreeId}}"
                       value="{{=d.positionId}}">
                <div class="menuContent" style="display:none; position: absolute;z-index: 10000;">
                    <ul id="{{=d.positionZtreeId}}" class="ztree" style="margin-top:0; width:220px;"></ul>
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">招聘人数</label>
            <div class="layui-input-inline">
                <input type="text" requireName="number" lay-verify="number" autocomplete="off"
                       placeholder="请输入招聘人数" class="layui-input" value="{{=d.number}}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">已完成人数</label>
            <div class="layui-input-inline">
                <input type="text" requireName="realNumber" lay-verify="number" autocomplete="off"
                       placeholder="请输入已完成招聘人数" class="layui-input" value="{{=d.realNumber}}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">职位描述</label>
            <div class="layui-input-inline">
                <textarea requireName="description" placeholder="请输入职位描述"
                          class="layui-textarea">{{=d.description}}</textarea>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline">
                <textarea requireName="remarks" placeholder="请输入职位备注" class="layui-textarea">{{=d.remarks}}</textarea>
            </div>
        </div>
        <i class="layui-icon" style="cursor: pointer;font-size: 24px;" onclick="removeDiv(this)">&#x1007;</i>
    </div>
</script>
<script>
    var hrRecruitRequires = ${hrRecruitRequires};
    var organizationZNodes = getOrganizationTree(true, false);
    var positionZNodes = getPositionTree(true, false);
    $(function () {
        $(hrRecruitRequires).each(function (index, require) {
            var organNodes = $.extend(true, [], organizationZNodes);
            var positionNodes = $.extend(true, [], positionZNodes);
            $(positionNodes).each(function (pIndex, position) {
                if (position.id == require.positionId) {
                    position.checked = true;
                    require.positionName = position.name;
                }
            });
            $(organNodes).each(function (pIndex, organization) {
                if (organization.id == require.organizationId) {
                    organization.checked = true;
                    require.organizationName = organization.name;
                }
            });
            if (!require.realNumber || require.realNumber == 0) {
                require.realNumber = "0";
            }
            if (!require.number || require.number == 0) {
                require.number = "0";
            }
            addRecruitRequire(require, organNodes, positionNodes);
        });
        FormCommon.initForm({
            url: '${basePath}/oa/hr/recruitPlan/update',
            subContentType: "json",
            editData: function (data) {
                var requires = [];
                var requireDivs = $("#recruit_require").children();
                var startTime = new Date(data.startTime);
                var endTime = new Date(data.endTime);
                if (startTime > endTime) {
                    throw ("招聘开始时间不能再结束时间之前！");
                }
                var allNumber = 0;
                $(requireDivs).each(function (index, requireDiv) {
                    var require = {};
                    require.organizationId = $(requireDiv).find("input[requireName='organizationId']").val();
                    require.positionId = $(requireDiv).find("input[requireName='positionId']").val();
                    require.number = $(requireDiv).find("input[requireName='number']").val();
                    require.realNumber = $(requireDiv).find("input[requireName='realNumber']").val();
                    require.description = $(requireDiv).find("textarea[requireName='description']").val();
                    require.remarks = $(requireDiv).find("textarea[requireName='remarks']").val();
                    if (Number(require.number) < Number(require.realNumber)) {
                        throw ("已完成人数不能超过招聘人数");
                    }
                    allNumber += Number(require.number);
                    requires.push(require);
                });
                if (requires.length < 1) {
                    throw ("请设置招聘需求");
                } else if (allNumber != data.number) {
                    throw ("招聘计划总人数必须和招聘需求中的总人数相同");
                }
                data.requires = requires;
                return data;
            }
        });
        layui.use('laydate', function () {
            laydate = layui.laydate;
            $(".date-select").each(function (index, input) {
                laydate.render({
                    elem: this //指定元素
                    , theme: '#393D49'
                });
            });
        });
    });
    function addRecruitRequire(recruitRequire, organNodes, positionNodes) {
        if (!organNodes) {
            organNodes = organizationZNodes;
        }
        if (!positionNodes) {
            positionNodes = positionZNodes;
        }
        console.log(organNodes);
        console.log(positionNodes);
        if (!recruitRequire) {
            recruitRequire = {};
        }
        var organizationZtreeId = FormCommon.generateRandomAlphaNum(16);
        var positionZtreeId = FormCommon.generateRandomAlphaNum(16);
        recruitRequire.organizationZtreeId = organizationZtreeId;
        recruitRequire.positionZtreeId = positionZtreeId;
        var tpl = $("#require").html();
        laytpl(tpl).render(recruitRequire, function (html) {
            $("#recruit_require").append(html);
        });
        $.fn.zTree.init($("#" + organizationZtreeId), ZtreeCommon.radioAllSetting, organNodes);
        $.fn.zTree.init($("#" + positionZtreeId), ZtreeCommon.radioAllSetting, positionNodes);
    }

    function removeDiv(i) {
        $(i).parent().remove();
    }
</script>
</body>
</html>
